<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <title>Boostrap表格</title>
  </head>
  <body>
    <div class="container">
      <!-- 在table标签添加.table类说明是一个booststrap的表格， -->
      <!-- table-bordered给表格添加边框和边距 -->
      <!-- table-borderless创建没有边框的表格 -->
      <!-- table-sm用于创建紧凑型表格 -->
      <!-- table-responsive-* 可以用于创建响应式表格 -->
      <!-- table-striped 创建间隔条纹的表格 -->
      <!-- table-hover创建有鼠标经过相应的表格 -->
      <!-- 可以同时使用多个类 -->
      <table class="table table-hover ">
        <!-- 表头 -->
        <thead>
          <!-- tr用于创建一行 -->
          <tr>
            <!-- th用于创建表头中的列 -->
            <th>ID</th>
            <th>名字</th>
            <th>城市</th>
            <th>邮箱</th>
          </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
          <tr>
            <!-- td用于创建主体中的列 -->
            <td>1</td>
            <td>Tom</td>
            <td>北京</td>
            <td>Tom@qq.com</td>
          </tr>
          <tr>
            <td>2</td>
            <td>John</td>
            <td>上海</td>
            <td>john@qq.com</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Jake</td>
            <td>上海</td>
            <td>jack@qq.com</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Trout</td>
            <td>北海</td>
            <td>trout@qq.com</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
